<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer1" />
    <div id="cesium-viewer2" />
    <div class="tool-box-left-bottom"></div>
    <!-- <GlobeRotater showTime :viewerSource="viewerSource" /> -->
    <!-- <MousePosition show :viewerSource="viewerSource" /> -->
  </div>
</template>

<script>
// https://sandcastle.cesium.com/?src=Multiple%20Synced%20Views.html&label=All
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, watch, toRaw } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
import { G3V } from '@g3x';
import { MousePosition, viewerSettingSidebar, GlobeRotater } from '@g3x/g3v/ui';
import {viewerMixin} from '@mixins';
import merge from '@g3x/utils/merge';

const $g3vOptions = {
  defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers: [
    {
      dom: 'cesium-viewer1',
      name: 'viewer1',
      title: 'viewer#01',
      viewer: {
        imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
        imageryProvider: null,
        // terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
        terrainProvider: null,
        shadows: false,
        // sceneMode: Cesium.SceneMode.SCENE2D,
        animation: false
      },
      layers: [
        // { type: 'tdtIboMap', options: { brightness: 1, show: true } },
        // { type: 'tdtImgAnno', options: { brightness: 1, show: true } },
        // { type: 'darkMask', options: { brightness: 1, alpha: 0.9 } },
        {
          type: 'graticule',
          options: {
            brightness: 1,
            show: false
          }
        }
      ],
      globe: {
        depthTestAgainstTerrain: false,
        enableLighting: true //启用以太阳为光源的地球
      },
      bottomContainer: false,
      navigation: {
        // defaultResetView: G3V.defaultViews.global.china.rectangle ,
        defaultResetView: null //flyHome
      },
      shortcutAction: false,
      hideLayers: false
    },
    {
      dom: 'cesium-viewer2',
      name: 'viewer2',
      title: 'viewer#2',
      navigation: {
        defaultResetView: null //flyHome
      },
      viewer: {
        imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
        imageryProvider: null,
        terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
        terrainProvider: null,
        shadows: false,
        sceneMode: Cesium.SceneMode.SCENE2D
      }
    }
  ]
};

export default defineComponent({
  name: 'sync', // 多窗口同步
  mixins: [viewerMixin],
  components: { SelectBox, SliderBar, viewerSettingSidebar, GlobeRotater, MousePosition },
  props: {},
  setup() {
    return {};
  },
  data() {
    return {};
  },
  computed: {
    viewer2() {
      const g3v = toRaw(this.g3v);
      return g3v && g3v.viewer$2;
    },
    g3vViewer2() {
      const g3v = toRaw(this.g3v);
      return g3v && g3v.g3vViewer$2;
    }
  },
  watch: {},
  methods: {
    g3vOptionsGet(original) {
      // const g3vOptions = merge($g3vOptions, true);
      return $g3vOptions;
    },
    onViewerInited() {
      console.log('fly onViewerInited');
    },
    initEffects() {
      let vm = this;
      const { viewer: view3D, viewer2: view2D } = vm;
      // return;
      // We want our two views to be synced across time, so we create
      // a shared clock object that both views share
      // var clockViewModel = new Cesium.ClockViewModel();
      var worldPosition;
      var distance;

      function sync2DView() {
        // The center of the view is the point that the 3D camera is focusing on
        var viewCenter = new Cesium.Cartesian2(Math.floor(view3D.canvas.clientWidth / 2), Math.floor(view3D.canvas.clientHeight / 2));
        // Given the pixel in the center, get the world position
        var newWorldPosition = view3D.scene.camera.pickEllipsoid(viewCenter);
        if (Cesium.defined(newWorldPosition)) {
          // Guard against the case where the center of the screen
          // does not fall on a position on the globe
          worldPosition = newWorldPosition;
        }
        // Get the distance between the world position of the point the camera is focusing on, and the camera's world position
        distance = Cesium.Cartesian3.distance(worldPosition, view3D.scene.camera.positionWC);
        // Tell the 2D camera to look at the point of focus. The distance controls how zoomed in the 2D view is
        // (try replacing `distance` in the line below with `1e7`. The view will still sync, but will have a constant zoom)
        view2D.scene.camera.lookAt(worldPosition, new Cesium.Cartesian3(0.0, 0.0, distance/20));

        // const {heading,pitch,roll} = view2D.camera;
        // view2D.scene.camera.lookAt(worldPosition, new Cesium.HeadingPitchRange(heading, pitch, range));
      }

      // Apply our sync function every time the 3D camera view changes
      view3D.camera.changed.addEventListener(sync2DView);
      // By default, the `camera.changed` event will trigger when the camera has changed by 50%
      // To make it more sensitive, we can bring down this sensitivity
      view3D.camera.percentageChanged = 0.01;

      // Since the 2D view follows the 3D view, we disable any
      // camera movement on the 2D view
      // view2D.scene.screenSpaceCameraController.enableRotate = false;
      // view2D.scene.screenSpaceCameraController.enableTranslate = false;
      // view2D.scene.screenSpaceCameraController.enableZoom = false;
      // view2D.scene.screenSpaceCameraController.enableTilt = false;
      // view2D.scene.screenSpaceCameraController.enableLook = false;
    }
  }
});
</script>

<style lang="less">
.cesium-viewer-wapper {
  #cesium-viewer1 {
    position: absolute;
    left: 0;
    width: 50%;
    height: 100%;
  }
  #cesium-viewer2 {
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
  }

  .tool-box-left-top {
    display: flex;
    button {
      min-width: 5em;
      background-color: rgba(0, 0, 0, 0.75);
      border-color: rgba(0, 0, 0, 0);
      cursor: pointer;
      transition: all 500ms;
      &:hover {
        opacity: 0.75;
      }
      &.active {
        background-color: rgba(0, 20, 200, 0.75);
      }
    }
  }
}
</style>
